<template>
  <div class="fapiaopeizhi" style="padding: 0 30px;">
    <div class="kflexc" style="margin-bottom: 30px;">
     <div><img src="../../../../static/yongjin/yongjin3.png" style="width: 22px; margin-bottom: 0;"></div>
     <div style="font-weight: bold; font-size: 18px; margin-left: 10px; position: relative; top: -2px;">发票类型</div>
   </div>
    <!-- <div style="font-size: 18px; margin-bottom: 20px;">发票类型</div> -->
      <div style="margin-bottom: 20px; padding: 20px; background: rgb(247, 248, 249);">

        <div class="kflexc" v-for="item in fapiaoall.configs.data" :key="item.type" style="margin-bottom: 30px;">
          <div style="margin-right: 20px;"><el-checkbox v-model="item.ok" :true-label="1" :false-label="0"></el-checkbox></div>
          <div style="margin-right: 40px; width: 120px;">{{item.name}}</div>
          <div v-if="item.type != 4 && item.type != 5">税点{{toPercent(item.tax,0)}}</div>
          <div v-if="item.type == 4" class="bai">
            <el-select clearable filterable style="width: 200px; margin-right: 30px;" v-model="item.tax" placeholder="请选择">
              <el-option  label="0"  :value="0"></el-option>
              <el-option  label="1%"  :value="0.01"></el-option>
              <el-option  label="2%"  :value="0.02"></el-option>
              <el-option  label="3%"  :value="0.03"></el-option>
              <el-option  label="4%"  :value="0.04"></el-option>
              <el-option  label="5%"  :value="0.05"></el-option>
              <el-option  label="6%"  :value="0.06"></el-option>
            </el-select>
          </div>
          <div v-if="item.type == 5" class="bai">
            <el-select clearable filterable style="width: 200px; margin-right: 30px;" v-model="item.tax" placeholder="请选择">
              <el-option  label="提现方承担税点 0%"  :value="0"></el-option>
              <el-option  label="支付方承担税点 6%"  :value="0.06"></el-option>
            </el-select>
          </div>
        </div>

        <div style="display: flex;font-size: 13px;margin-bottom: 30px;">
          <div>扣税方式：</div>
          <el-radio v-model="ksradio" :label="1">
            <div style="display: inline-grid;" >
              <div style="font-weight: normal;">按照标准税务计算方式扣除</div>
              <div style="font-weight: normal;color: #C0C4CC;margin-top: 10px;">计算公式：提现金额÷1.06*（6%-开票税点）</div>
            </div>
          </el-radio>
          <el-radio v-model="ksradio" :label="2">
            <div style="display: inline-grid;">
              <div style="font-weight: normal;">按照粗略方式扣除</div>
              <div style="font-weight: normal;color: #C0C4CC;margin-top: 10px;">扣除计算公式：提现金额×（6%-开票税点)</div>
            </div>
          </el-radio>
        </div>

        <div><el-button type="danger" round @click="peizhi2">确认保存</el-button></div>
      </div>

      <div class="kflexc" style="margin-bottom: 30px;">
        <div><img src="../../../../static/yongjin/yongjin3.png" style="width: 22px; margin-bottom: 0;"></div>
        <div style="font-weight: bold; font-size: 18px; margin-left: 10px; position: relative; top: -2px;">开户信息</div>
      </div>

      <div class="kflexc" style="gap: 20px; font-size: 14px;">
        <div style="width: 480px; padding: 20px; color: rgb(102, 102, 102); background: rgb(247, 248, 249); border-radius: 10px; position: relative;" v-for="item in list" :key="item.id">
          <div style="position: absolute; right: 20px; top: 20px;">
            <el-button round size="mini" @click="shanchu(item)">删除</el-button>
            <el-button round size="mini" @click="add(item)">编辑</el-button>
          </div>
          <div class="kflexc" style="margin-bottom: 20px;">
            <div style="width: 110px;">发票抬头</div>
            <div style="color: rgb(51, 51, 51);">{{item.invoice_header}}</div>
          </div>
          <div class="kflexc" style="margin-bottom: 20px;">
            <div style="width: 110px;">纳税识别号</div>
            <div style="color: rgb(51, 51, 51);">{{item.invoice_code}}</div>
          </div>
          <div class="kflexc" style="margin-bottom: 20px;">
            <div style="width: 110px;">开户行</div>
            <div style="color: rgb(51, 51, 51);">{{item.invoice_bank}}</div>
          </div>
          <div class="kflexc" style="margin-bottom: 20px;">
            <div style="width: 110px;">开户帐号</div>
            <div style="color: rgb(51, 51, 51);">{{item.invoice_bank_no}}</div>
          </div>
          <div class="kflexc" style="margin-bottom: 20px;">
            <div style="width: 110px;">联系电话</div>
            <div style="color: rgb(51, 51, 51);">{{item.invoice_tel}}</div>
          </div>
          <div class="kflexc" style="margin-bottom: 20px;">
            <div style="width: 110px;">开票地址</div>
            <div style="color: rgb(51, 51, 51);">{{item.invoice_addr}}</div>
          </div>
        </div>
        <div style="width: 480px; cursor: pointer; height: 156px; padding: 20px; color: rgb(102, 102, 102); background: rgb(247, 248, 249); border-radius: 10px; position: relative;" class="kflexcc" @click="add">
          + 添加发票信息
        </div>
      </div>


      <el-dialog title="发票信息" :visible.sync="log1" width="450px"  :close-on-click-modal="false" :close-on-press-escape="false">

          <div style="color: rgb(64, 66, 71); font-size: 16px; margin-bottom: 10px;">发票抬头</div>
          <div style="margin-bottom: 20px;"><el-input v-model="fixall2.invoice_header" placeholder="发票抬头"></el-input></div>
          <div style="color: rgb(64, 66, 71); font-size: 16px; margin-bottom: 10px;">纳税人识别号</div>
          <div style="margin-bottom: 20px;"><el-input v-model="fixall2.invoice_code" placeholder="纳税人识别号"></el-input></div>
          <div style="color: rgb(64, 66, 71); font-size: 16px; margin-bottom: 10px;">开户行</div>
          <div style="margin-bottom: 20px;"><el-input v-model="fixall2.invoice_bank" placeholder="开户行"></el-input></div>
          <div style="color: rgb(64, 66, 71); font-size: 16px; margin-bottom: 10px;">开户行账号</div>
          <div style="margin-bottom: 20px;"><el-input v-model="fixall2.invoice_bank_no" placeholder="开户行账号"></el-input></div>
          <div style="color: rgb(64, 66, 71); font-size: 16px; margin-bottom: 10px;">联系电话</div>
          <div style="margin-bottom: 20px;"><el-input v-model="fixall2.invoice_tel" placeholder="联系电话"></el-input></div>
          <div style="color: rgb(64, 66, 71); font-size: 16px; margin-bottom: 10px;">开票地址</div>
          <div style="margin-bottom: 20px;"><el-input v-model="fixall2.invoice_addr" placeholder="开票地址"></el-input></div>

        <span slot="footer" class="dialog-footer">
          <el-button round @click="log1 = false">取消</el-button>
          <el-button type="danger" round @click="peizhi">确认</el-button>
        </span>
      </el-dialog>



  </div>
</template>

<script>
  import diqu from '@/components/productionDelivery/tongyidizhi/zidongshengchanguanli.vue'
  import axios from 'axios'
  export default {
    name: "fapiaopeizhi",
    components:{
      diqu
    },
    data() {
      return {
        fapiaoall:{
          configs:""
        },
        ksradio:"",
        relo:true,


        list:[],
        log1:false,
        fixall2:{
          id: "",
          invoice_bank: "",
          invoice_bank_no: "",
          invoice_code: "",
          invoice_header: "",
          invoice_tel:'',
          invoice_addr:''
        }

      }
    },
    created() {
      this.getfapiao()
      axios.get('/api/plan-market/invoice/info').then((response)=>{
        if (response.data.msg.code == 0) {
          this.fapiaoall = response.data.data
          this.fapiaoall.configs = JSON.parse(this.fapiaoall.configs)
          this.relo = false
          this.$nextTick(()=>{
            this.relo = true
          })
          this.ksradio = this.fapiaoall.configs.type
        } else {
          this.$message.error(response.data.msg.info);
        }
      })
    },
    mounted() {

    },
    methods: {
      shanchu:function(item){
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          axios.post('/api/plan-market/invoice/del',{id:item.id}).then((response)=>{
            if (response.data.msg.code == 0) {
              this.$message.success('操作成功');
              this.getfapiao()
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
        })
      },
      //小数转百分比
      toPercent(point,fixed){
        var percent = Number(point*100).toFixed(fixed);
        percent+="%";
        return percent;
      },
      add:function(item){
        console.log('99999')
        console.log(item)
        if(item){
          this.fixall2 = {
            id: item.id,
            invoice_bank: item.invoice_bank,
            invoice_bank_no: item.invoice_bank_no,
            invoice_code: item.invoice_code,
            invoice_header: item.invoice_header,
            invoice_tel:item.invoice_tel,
            invoice_addr:item.invoice_addr
          }
        }else{
          this.fixall2 = {
            id: "",
            invoice_bank: "",
            invoice_bank_no: "",
            invoice_code: "",
            invoice_header: "",
            invoice_tel:'',
            invoice_addr:''
          }
        }
        this.log1 = true
      },
      peizhi2:function(){
        let all = JSON.parse(JSON.stringify(this.fapiaoall))
        var obj = {
          data:all.configs.data,
          type:this.ksradio
        }
        all.configs = JSON.stringify(obj)

        axios.post('/api/plan-market/invoice/make',all).then((response)=>{
          if (response.data.msg.code == 0) {
            this.$message.success('修改成功');
            this.getfapiao()

          } else {
            this.$message.error(response.data.msg.info);
          }
        })
      },
      peizhi:function(){
        axios.post('/api/plan-market/invoice/update',this.fixall2).then((response)=>{
        	if (response.data.msg.code == 0) {
            this.$message.success('操作成功');
            this.getfapiao()
            this.log1 = false

        	} else {
        		this.$message.error(response.data.msg.info);
        	}
        })
      },
      getfapiao:function(){
        axios.get('/api/plan-market/invoice/list').then((response)=>{
        	if (response.data.msg.code == 0) {
            this.list = response.data.data
            console.log('00')
            console.log(this.list)
        	} else {
        		this.$message.error(response.data.msg.info);
        	}
        })
      },
    }
  }
</script>

<style lang="scss" scoped>
  .bai{
    /deep/ .el-input__inner{ background: #fff !important;}
  }
</style>
